<template>
	<view>
		<view class="topbox">
			<view class="tab_list">
				<view 
					class="tab_li"
					v-for="(item,index) in filterList"
					:key="index"
					:class="{'tab_li_active': item.id == readIndex}"
					@click="changeTab(item)"
				>{{item.name}}</view>
			</view>
		</view>
		<view class="querylist"> 
		</view>
		<view class="fllow_item" v-for="(item,index) in lists" :key="index">
			<view class="item_content" @click.stop="clientClick(item,index)">
				<view class="con_img">
					<image :src="BASE_IMG_URL+ 'headImg.png'" class="headerimg"  mode="scaleToFill"></image>
					<view class="main_first">
						<view class="main_title">
							<view class="first_left">
								<view>{{item.memberName||''}}</view>
								<view class="fontColor">{{item.followup_type_desc||''}}</view>
							</view> 
						</view>
						<view class="fontColor main_time">{{item.followup_order_info?item.followup_order_info:''}}</view> 
					</view>
				</view>
				<view class="con_main" >
					<view class="main_second">
						<view>{{item.followup_content||''}}</view>
					</view>
					<view class="main_img" v-if="item.file.length != 0" @tap.stop.prevent>
						<image 
							:src="ele.file_path" 
							v-for="(ele,fileindex) in item.file" 
							:key="fileindex" 
							v-if="ele.types == 'image'" 
							class="imgbox" 
							 mode="scaleToFill"
							@click.stop="toPrevieImg(ele.file_path)"
						></image>
					</view>
					<view class="main_third fontColor" v-if="item.followup_time != null">
						<view class="third_left" >
							<view class="iconfont icon-clock"></view> 
							<view class="lxs_time">提醒时间：{{item.followup_time||''}}</view>
						</view>
						<view class="third_right">
							<view class="iconfont icon-arrows_right"></view>
						</view>
					</view>
					
					<view class="customer">跟进人：<span style="color:rgb(3, 170, 150)">{{item.followup_staff_name ? item.followup_staff_name:""}}</span></view>
					<view class="customer" v-if="item.followup_finish_time">完成时间：<span style="color:rgb(132, 132, 132)">{{item.followup_finish_time||''}}</span></view>
				</view>
			</view> 
		</view>
		<view style="height: 200rpx;"></view>
		<u-empty v-if="lists.length == 0" text="暂无更多"></u-empty>
	</view>
</template>

<script>
	import { BASE_IMG_URL } from '@/util/api.js'
	import { netKehuFollow } from '@/api/kehu.js'
	import {followRecordPageJumps} from "../crm_page_jumps.js";
	export default {
		mixins:[followRecordPageJumps],
		data() {
			return {
				page:1,
				limit:10,
				totalPage:1,
				
				filterList:[{id:1,name:'提醒中'},{id:2,name:'已完成'},{id:3,name:'全部'}],
				readIndex:1,
				BASE_IMG_URL:BASE_IMG_URL,
				lists:[]
			}
		},
		onLoad() {
		},
		onShow() {
			this.lists = []
			this.page = 1
			this.getList()
		},
		onReachBottom() {
			if(this.page >= this.totalPage){
				return
			}
			this.page ++
			this.getList()
		},
		methods: {
			toMore(id,type){
				uni.navigateTo({
					url:'/pages/index/groupCompany/groupCompany?id='+ id+'&type='+type,
				})
			},
			changeTab(item) {
				this.readIndex = item.id
				this.page = 1
				this.lists = []
				this.getList()
			},
			getList() {
				let params = {
					page: this.page,
					limit: this.limit,
					followup_filter: this.readIndex
				}
				netKehuFollow(params).then(res=>{
					this.lists = this.lists.concat(res.data.list)
					this.totalPage = res.data.totalPage
				})
			},
			//查看 图片
			toPrevieImg(file) {
				uni.previewImage({
					urls: [file]
				})
			},
			// 跳转到详情页面
			clientClick(item,index) {
				if(!item.followup_finished) {
					uni.navigateTo({
						url:'/pagesA/crm/customerManagement/newFllow/newFllow?followup_id='+item.id,
						success:()=>{
							let arr = this.lists
							arr[index].is_read = 1
							this.lists = arr
						}
					})
				} else {
					uni.navigateTo({
						url:'/pagesA/crm/cluesManagement/followUpDetail/followUpDetail?followup_id='+item.id,
						success:()=>{
							let arr = this.lists
							arr[index].is_read = 1
							this.lists = arr
						}
					})
				}
				
			},
		}
	}
</script>

<style lang="scss">
	.topbox{
		width:750rpx;
		height:80rpx;
		background:#fff;
		.tab_list{
			padding:0 24rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.tab_li{
				width:120rpx;
				font-size:30rpx;
				color:#666;
				height:80rpx;
				margin-right:40rpx;
				line-height: 80rpx;
				flex-shrink: 0;
				text-align: center;
			}
			.tab_li_active{
				color:#000;
				position: relative;
				&::after{
					content:'';
					width:60rpx;
					height:6rpx;
					background:#03aa96;
					position: absolute;
					bottom:0;
					left:50%;
					transform: translateX(-50%);
				}
			}
		}
	} 
	.querylist{
		margin:40rpx 0 30rpx;
		padding:0 30rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		.queryfir{
			box-shadow: 2rpx 2rpx 50rpx rgba(0,0,0,0.1);
			background:#fff;
			border-radius: 8rpx;
		}
		.form_right{
			width:180rpx;
			height:50rpx;
			font-size:22rpx;
			color:#666;
			text-align: center;
			line-height: 48rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.bottomimg{
				width:20rpx;
				height:33rpx;
				margin-left:15rpx;
			}
		}
	}
	.fllow_item {
		position: relative;
		.unread{
			width:10rpx;
			height:10rpx;
			border-radius: 50%;
			position: absolute;
			right:5rpx;
			top:5rpx;
			background:#F43F3B;
		}
		.item_data {
			margin: 30rpx 0;
	
			&::before {
				content: '';
				display: inline-block;
				margin: 0 15rpx 0 24rpx;
				width: 20rpx;
				height: 20rpx;
				border-radius: 10rpx;
				border: 2rpx solid #03aa96;
			}
		}
	
		.item_content {
			display: block;
			background-color: #fff;
			padding: 24rpx 24rpx; 
			border-radius: 10rpx;
			margin-bottom: 30rpx;
	
			.con_img {
				display: flex;
				.main_first {
					margin-bottom: 25rpx;
					padding-left: 25rpx;
					flex: 1;
					.main_time{
						line-height: 25px;
					}
					.main_title{
						display: flex;
						width: 100%;
						justify-content: space-between;
						.first_left {
							display: flex;
						
							:first-child {
								font-size: 32rpx;
								margin-right: 10rpx;
								margin-top: -3rpx;
							}
						
							:last-child {
								margin-top: 2rpx;
							}
						}
						.main_type{
							padding:5rpx 20rpx;
							border-radius: 10rpx;
							color:#fff;
						}
						.daofang{
							background:#03aa96;
						}
						.genjin{
							background:#ff7800;
						}
						.other{
							background:#1CBBB4;
						}
					}
					
				}
				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
			}
	
			.con_main {
				flex: 1;
				.main_second{
					padding-bottom:20rpx;
				}
				
				.main_img{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					flex-wrap: wrap;
					margin-top: 20rpx;
					.imgbox{
						padding: 10rpx;
						border-radius: 5rpx;
						border:1rpx solid #CCCCCC;
						width:160rpx;
						height:160rpx;
						margin-right:14rpx;
						margin-bottom:14rpx;
					}
				}
				.main_third {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 20rpx 0 10rpx;
	
					.third_left {
						display: flex;
						align-items: center;
						.icon-clock{
							font-size:32rpx;
						}
						.lxs_time{
							margin-left: 5px;
							font-size:26rpx;
						}
					}
					.third_right {
						display: flex;
						.right_num {
							display: flex;
							:last-child {
								margin-right: 20rpx;
							}
						}
	
						.icon-arrows_right {
							margin-top: -4rpx;
						}
					}
				}
	
				.main_fourth {
					padding-bottom: 10rpx;
				}
			}
		}
	}
	.fontColor {
		color: #999;
	}
	.customer{
		margin-top:15rpx;
	}
</style>
